<template>
  <div class="contanter">
    <span>
      <h2 style="display: inline-block">车位使用管理</h2>
      <span> 用于管理小区里每一个停车位的使用情况 </span>
    </span>
    <!-- 搜索区域 S-->
    <el-card class="box-card">
      <el-row :gutter="15" class="searchForm">
        <el-form
          ref="formData"
          :model="formData"
          size="medium"
          label-width="97px"
          label-position="top"
        >
          <el-row type="flex" justify="start" class="search">
            <el-col :span="4">
              <el-form-item label="小区名称">
                <el-select
                  v-model="formData.community_code"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in communityNames"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车位名称">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车辆牌照">
                <el-input
                  v-model="formData.license_plate"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车主姓名">
                <el-input
                  v-model="formData.owner"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="练习方式">
                <el-input
                  v-model="formData.tel"
                  placeholder="请输入"
                  clearable
                  size="small"
                  :style="{ width: '100%' }"
                />
              </el-form-item>
            </el-col>
            <el-col v-show="!seShow" :span="4">
              <el-form-item label="使用性质">
                <el-select v-model="formData.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    value-format="timestamp"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 搜索时间选择框 -->
            <el-col v-show="!seShow" :span="4">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="createTime"
                  type="daterange"
                  size="small"
                  format="yyyy-MM-dd"
                  value-format="timestamp"
                  :style="{ width: '100%' }"
                  start-placeholder="请选择"
                  end-placeholder="请选择"
                  range-separator="-"
                  clearable
                  @change="selectTime"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="4"
              :offset="offset"
              style="padding-left: 12px; padding-right: 12px; text-align: end"
            >
              <div class="right-btn">
                <el-form-item class="botn">
                  <el-button @click="reset()">重置</el-button>
                  <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
                <div class="packup" @click="packUp">
                  <span>{{ !seShow ? "收起" : "下拉" }}</span>
                  <span v-if="!seShow"><i class="el-icon-arrow-up" /></span>
                  <span v-else><i class="el-icon-arrow-down" /></span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <!-- 搜索区域 E-->
    <!-- 表格区域 -->
    <el-card class="box-card two">
      <!--  -->
      <span style="float: right">
        <el-button
          style="margin-right: 20px"
          type="primary"
          @click="add"
        >新增使用情况</el-button>
        <!-- 刷新 -->
        <el-tooltip content="刷新" placement="top">
          <el-link
            :underline="false"
            style="font-size: 25px"
            icon="el-icon-refresh-right"
            @click="refresh()"
          /></el-tooltip>
      </span>
      <!-- <i style="font-size: 20px" class="el-icon-refresh-right"></i> -->
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="community.name" label="小区名称" />
        <el-table-column prop="parking_space.name" label="车位名称">
          <template v-slot="{ row }">
            {{
              row.parking_space === null ? row.pk_code : row.parking_space.name
            }}
          </template>
        </el-table-column>
        <el-table-column prop="license_plate" label="车辆牌照" />
        <el-table-column prop="owner" label="车主姓名" />
        <el-table-column prop="tel" label="联系方式" />
        <el-table-column prop="type" label="使用性质">
          <template slot-scope="{ row }">
            {{ +row.type === 1 ? "售" : "租" }}
          </template>
        </el-table-column>
        <el-table-column prop="cost" label="总费用" />
        <el-table-column prop="create_time" label="开始时间">
          <template
            v-slot="{ row }"
          >{{ row.create_time | formatDate }}
          </template></el-table-column>
        <el-table-column prop="end_time" label="截止时间">
          <template
            v-slot="{ row }"
          >{{ row.end_time | formatDate }}
          </template></el-table-column>
        <el-table-column prop="parking_space.name" label="备注" />
        <el-table-column prop="begin_time" label="创建时间" />
        <el-table-column prop="" label="操作" width="180">
          <template v-slot="{ row }">
            <el-button type="text" @click="edit(row.id)">编辑</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <span
          class="demonstration"
        >1-{{ tableData.length }}总共{{ count }}条</span>

        <el-pagination
          :current-page="table.current"
          :page-size="table.pageSize"
          layout="prev, pager, next"
          :total="count"
          @current-change="changeCurrent"
        />
      </el-row>
    </el-card>
    <!-- 抽屉 -->
    <el-drawer
      ref="drawer"
      size="50%"
      title="新增车位信息"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <!-- 表单 -->
      <el-form :model="addData" class="demo-form-inline" style="padding: 20px">
        <!-- 1 -->
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属小区">
              <el-select
                v-model="addData.community_code"
                placeholder="请选择"
                @change="changeCar"
              >
                <el-option
                  v-for="item in communityNames"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                  style="width: 100%"
                />
              </el-select>
            </el-form-item>
            <div class="grid-content bg-purple" /></el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="车位编号">
              <!-- 新增 -->
              <el-input
                v-if="!showInput"
                v-model="addData.pk_code"
                placeholder="请输入"
              />
              <!-- 修改 -->
              <el-select
                v-if="showInput"
                v-model="addData.name"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in CarCodeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <div class="grid-content bg-purple-light" /></el-col>
        </el-row>
        <!-- 2 -->
        <el-row>
          <el-col :span="10">
            <el-form-item label="车辆牌照">
              <el-input
                v-model="addData.license_plate"
                placeholder="请输入"
              />
            </el-form-item>
            <div class="grid-content bg-purple" /></el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="车主姓名">
              <el-input v-model="addData.owner" placeholder="请输入" />
            </el-form-item>
            <div class="grid-content bg-purple-light" /></el-col>
        </el-row>
        <!-- 3 -->
        <el-row>
          <el-col :span="10">
            <el-form-item label="联系方式">
              <el-input v-model="addData.tel" placeholder="请输入" />
            </el-form-item>
            <div class="grid-content bg-purple" /></el-col>
          <el-col
            :span="10"
            :offset="2"
          ><el-form-item label="使用性质">
             <!-- <el-input v-model="addData.type" placeholder="请输入"></el-input> -->
             <el-radio-group v-model="addData.type">
               <el-radio :label="0">租</el-radio>
               <el-radio :label="1">售</el-radio>
             </el-radio-group>
           </el-form-item>
            <div class="grid-content bg-purple-light" /></el-col>
        </el-row>

        <!-- 4 -->
        <el-row>
          <el-col :span="10">
            <el-form-item label="总费用">
              <el-input v-model="addData.cost" placeholder="请输入" />
            </el-form-item>
            <div class="grid-content bg-purple" /></el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="备注">
              <el-input
                v-model="addData.remark"
                placeholder="请输入"
              />
            </el-form-item>
            <div class="grid-content bg-purple-light" /></el-col>
        </el-row>

        <!-- 5 -->
        <el-row>
          <el-col :span="10">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="addData.begin_time"
                value-format="timestamp"
                type="date"
                placeholder="选择日期"
                @change="selectTime"
              />
            </el-form-item>
            <div class="grid-content bg-purple" /></el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="addData.end_time"
                value-format="timestamp"
                type="date"
                placeholder="选择日期"
                @change="selectTime"
              />
            </el-form-item>
            <div class="grid-content bg-purple-light" /></el-col>
        </el-row>
      </el-form>
      <!-- 表单 -->
      <div class="demo-drawer__content">
        <div class="demo-drawer__footer" style="float: right">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="onSubmit()">{{
            loading ? "提交中 ..." : "确 定"
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getCommunityListApi } from '@/api/community'
import {
  getUsageListApi,
  SearchUsageApi,
  getCarCode,
  updataUsage,
  getUsageDeatil,
  addParkingApi,
  delUsageApi
} from '@/api/usage'
export default {
  name: 'Usage',

  data() {
    return {
      showInput: false, // 控制新增、修改表单的车位编号
      createTime: [],
      CarCodeOptions: [],
      loading: false,
      dialog: false, // 抽屉的开关
      // 控件显示隐藏
      seShow: false,
      offset: 16,
      // 搜索 表单
      formData: {
        community_code: '', // 小区名称
        name: '', // 车位名称
        license_plate: '', // 车辆牌照
        owner: '', // 车主姓名
        tel: '', // 联系方式
        create_time: '', // 创建时间
        type: null // 使用性质 1售  0租
      },
      count: '', // 总页数
      // 获取表格数据的传参
      table: {
        current: 1,
        pageSize: 10,
        create_time: ''
      },
      communityNames: [], // 小区名称
      // 使用性质
      options: [
        {
          value: 1,
          label: '售'
        },
        {
          value: 0,
          label: '租'
        }
      ],
      // 表格数据
      tableData: [],
      addData: {
        // 新增和编辑的表单

        community_code: '', // 小区名称

        pk_code: '', // 新增的车位编号
        name: '', // // 车位编号
        license_plate: '', // 车牌照
        owner: '', // 车主姓名
        tel: '', // 联系方式
        type: 1, // 使用性质 1售  0租
        cost: '', // 总费用
        remark: '', // 备注
        begin_time: '', // 开始时间
        end_time: '' //
      }
    }
  },
  created() {
    // 下拉框数据
    this.getCommunityList()
    // 表格数据
    this.getTableList()
  },
  mounted() {},

  methods: {
    // 刷新
    refresh() {
      this.getTableList()
      this.reset()
      this.$message('刷新成功')
    },
    // 选择时间
    selectTime(data) {
      if (data) {
        this.formData.create_time = data.toString()
      }
    },
    // 获取下拉框数据
    async getCommunityList() {
      const res = await getCommunityListApi(this.table)
      this.communityNames = res.data.data.rows
    },
    // 获取表格数据
    async getTableList() {
      const res = await getUsageListApi(this.table)
      this.tableData = res.data.data.rows
      // console.log("我是停车位的count", res.data.data.count);
      this.count = res.data.data.count
    },
    // 搜索
    async search() {
      const res = await SearchUsageApi(this.formData)
      this.tableData = res.data.data.rows
      // 搜索 表单
      this.formData = {
        community_code: '', // 小区名称
        name: '', // 车位名称
        license_plate: '', // 车辆牌照
        owner: '', // 车主姓名
        tel: '', // 联系方式
        create_time: '', // 创建时间
        type: null // 使用性质 1售  0租
      }
    },
    // 重置数据  搜索表单+表格
    reset() {
      this.createTime = [] // 清空搜索的日期
      this.formData = {
        community_code: '',
        name: '',
        license_plate: '',
        owner: '',
        tel: '',
        create_time: '',
        type: null
      }
      this.getTableList()
    },
    // 新增
    add() {
      this.addData = {
        // 新增和编辑的表单

        community_code: '', // 小区名称

        name: '', // // 车位编号
        license_plate: '', // 车牌照
        owner: '', // 车主姓名
        tel: '', // 联系方式
        type: 1, // 使用性质 1售  0租
        cost: '', // 总费用
        remark: '', // 备注
        begin_time: '', // 开始时间
        end_time: '' //
      }
      this.dialog = true
    },
    // 编辑
    async edit(id) {
      //
      this.showInput = true
      // 打开抽屉
      this.dialog = true
      // 数据回显
      const res = await getUsageDeatil(id)
      // console.log("获取回显数据", res.data.data);
      this.addData = res.data.data
      this.addData.name = res.data.data.pk_code
    },
    // 确定表单
    async onSubmit() {
      //
      if (this.addData.id) {
        // 编辑
        await updataUsage(this.addData)
        this.$message('修改成功')
      } else {
        // this.addData.name = "";
        // 新增
        await addParkingApi(this.addData)
      }
      this.handleClose()
      this.getTableList()
    },
    // 删除
    async del(id) {
      await this.$confirm('确定要删除吗？')
      const res = await delUsageApi(id)
      // console.log(res);
      if (res.data.success === false) {
        this.$message(res.data.msg)
      } else {
        this.$message('删除成功')
      }
    },
    // 展开收起
    packUp() {
      console.log('点击了')
      this.seShow = !this.seShow
      this.offset = this.seShow ? 0 : 16
    },
    // 关闭抽屉
    handleClose() {
      this.dialog = false
      this.CarCodeOptions = []
      this.showInput = false // 控制是select还是input
    },
    // 切换分页
    changeCurrent(val) {
      console.log(val)
      this.table.current = val
      this.getTableList()
    },
    changeSize(val) {
      console.log(val)
    },
    // 更改
    async changeCar() {
      this.addData.name = ''
      this.CarCodeOptions = []
      const res = await getCarCode(this.addData.community_code)
      // console.log("我修改了", res.data.data);

      res.data.data.map((item) => {
        // console.log(item.name);
        this.CarCodeOptions.push(item)
      })

      // console.log("我是获取的车编码", this.CarCodeOptions); //给车位编号
    }
  }
}
</script>

<style lang="scss" scoped>
.searchForm {
  .search {
    flex-wrap: wrap;
    .el-col {
      padding: 0 10px;
    }
    .right-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .botn {
        display: flex;
        align-items: flex-end;
        height: 100%;
        .el-button {
          display: block;
          margin-top: 5px;
          margin-left: 0;
          margin-right: 0;
        }
      }
      .packup {
        cursor: pointer;
        color: #1890ff;
      }
    }
  }
}
.contanter {
  padding: 20px;
}
.two {
  margin-top: 20px;
}
</style>
